<template>
  <view class="g-projectInfo">
    <view class="g-companyTop">
      <!-- <image src="../../static/test.png" class="u-companyLogo" /> -->
      <p class="m-companyName">{{obj.title}}</p>
      <p class="u-tags">
        <text v-for="i in obj.tags">{{i}}</text>
      </p>
    </view>
    <view class="m-companyintr">
      <p class="u-companyTitle">大咖点评</p>
      <p class="u-companyText">{{obj.celebrity_judge}}</p>
    </view>
    <view class="m-companyintr">
      <p class="u-companyTitle">项目需求</p>
      <p class="u-companyText">{{obj.requirement}}</p>
    </view>
    <view class="m-companyintr">
      <p class="u-companyTitle">公司简介</p>
      <p class="u-companyText">
        {{obj.company_summary}}
      </p>
    </view>
    <view class="m-companyintr">
      <p class="u-companyTitle">团队介绍</p>
      <p class="u-companyText">{{obj.team_summary}}</p>
      <!-- <p class="u-companyText">杨帆 联合创始人</p> -->
    </view>

    <view class="g-companyBootom">
      <image src="../../static/connect.png" class="m-coonect" @click="showLayer=true">
    </view>


    <view class="g-layer" v-show="showLayer">
      <view class="m-form" v-if='formData[0]'>
        <image src="../../static/layerTop.png" alt="" class="m-layerTop">
          <view class="m-inputGroup">
            <view class="u-input">
              <p class="u-label">
                联系人
              </p>
              <input type="text" v-model="formData[0].value">
              <!-- v-model="" -->
            </view>
            <view class="u-input">
              <p class="u-label">
                联系方式
              </p>
              <input type="text" v-model="formData[1].value">
            </view>
            <view class="u-input">
              <p class="u-label">
                公司名称<span>（无公司请填写个人）</span>
              </p>
              <input type="text" v-model="formData[2].value">
            </view>
            <view class="u-input">
              <p class="u-label">
                职位<span>（无公司请填写个人）</span>
              </p>
              <input type="text" v-model="formData[3].value">
            </view>
            <image src="../../static/commit.png" class="m-commit" @click="submitForm()">
          </view>
      </view>
    </view>
    <image src="../../static/goback.png" class="u-fixed" @click="navigatorTo()" />
  </view>
</template>

<script lang="ts">
  import Vue from "vue";
  export default Vue.extend({
    data() {
      return {
        showLayer: false,
        obj: {},
        formData: {}
      };
    },
    onShow() {
      console.log("App Show");
    },
    onLoad: function (options) {
      console.log(options)
      let that = this;
      uni.request({
        url: "http://luyan.nbd.com.cn/api/projects/project_info.json?id=" +options.id,
        method: "GET",
      }).then(res => {
        that.obj = res[1].data.data;
      });
  },
    mounted() {
      // let that = this;
      // uni.request({
      //   url: "http://luyan.nbd.com.cn/api/projects/project_info.json?id=" + this.$route.query.id,
      //   method: "GET",
      // }).then(res => {
      //   that.obj = res.data.data;
      // });

      // from get
      uni.request({
        url: "http://topic.nbd.com.cn/vision/api/signUP/5742fdd1a137414e82542be51096d762",
        method: "GET",
      }).then(res => {
        res.data.lines.map(function (i) {
          i.value = '';
        })
        that.formData = res.data.lines;
      });

    },

    methods: {
      navigatorTo() {
        uni.switchTab({
          url: '/pages/index/project'
        })
      },
      submitForm() {
        let that = this;
        for (let i = 0; i < that.formData.length; i++) {
          if (that.formData[i].value == '') {
            alert('请填写'+that.formData[i].line);
            return
          }
        }

        // from POST
        uni.request({
          url: "http://topic.nbd.com.cn/vision/api/signUP/5742fdd1a137414e82542be51096d762",
          method: "POST",
          data: { lines: that.formData },
        }).then(res => {
          alert("提交成功")
          location.reload();
          console.log(res)

        });

      }
    }
  });
</script>

<style lang="scss">
  .u-fixed {
    width: 110upx;
    height: 110upx;
    position: fixed;
    right: 30upx;
    bottom: 300upx;
  }

  .g-projectInfo {
    overflow: hidden;
    padding-bottom: 120upx;
  }

  .g-companyTop {
    height: 375upx;
    width: 100%;
    background: url("../../static/projectInfoBg.jpg");
    background-size: 100% 100%;
    padding-top: 74upx;
    box-sizing: border-box;
  }

  .u-companyLogo {
    width: 153upx;
    height: 94upx;
    margin: 0 auto 35upx;
    display: block;
  }

  .m-companyName {
    font-size: 35upx;
    color: #fff;
    text-align: center;
  }

  .u-tags {
    margin-top: 32upx;
    text-align: center;

    text {
      display: inline-block;
      margin-bottom: 5upx;
      padding: 8upx;
      background: #edac36;
      margin-right: 10px;
      color: #000;
      font-size: 20upx;
      border-radius: 10upx;
    }
  }

  .m-companyintr {
    width: 100%;
    padding: 30upx 0;
    background: #1b1f2d;
    margin-bottom: 15upx;
  }

  .u-companyTitle {
    color: #e9b95d;
    font-size: 30upx;
    margin-bottom: 40upx;
    border-left: 5px solid #e9b95d;
    padding-left: 35upx;
    letter-spacing: 2px;
  }

  .u-companyText {
    color: #d1d2d5;
    font-size: 24upx;
    margin-top: 45upx;
    padding: 0 35upx;
    text-align: justify;
  }

  .g-companyBootom {
    height: 100upx;
    width: 100%;
    background: #03050f;
    line-height: 100upx;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .m-coonect {
    width: 469upx;
    height: 72upx;
    display: block;
    margin: 18upx auto;
  }

  .g-layer {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.59);
    top: 0;
    left: 0;
  }

  .m-form {
    width: 570upx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .m-layerTop {
    width: 569upx;
    height: 133upx;
    display: block;
  }

  .m-inputGroup {
    padding: 50upx;
    background: #FFF;
  }

  .u-input {
    overflow: hidden;
    margin-bottom: 20upx;

    input {
      width: 100%;
      border-bottom: 1px solid #e5e5e5;
      margin-top: 10upx;
    }
  }

  .u-label {
    font-size: 30upx;
    color: #000000;

    span {
      color: #898989;
      font-size: 24upx;
    }
  }

  .m-commit {
    width: 469upx;
    height: 72upx;
    display: block;
    margin: 0 auto;
  }
</style>